import {defaultStyle} from '@/svgutil/default-style';
import {findObjectValue} from '@/svgutil/comm-method';
import * as Dt from '@/svgutil/draw-type';

export const defineData2 = function (values) {


    return {
        //整理旋转角度： 90°。默认0
        //rotate: 90,
        //整体偏移大小： x:100,y:100；默认[0,0]
        //translate: [0.5, 0.5],
        //整体缩放
        //scale: 1,
        style: {...defaultStyle},
        children: [
            testRect(),
            testTriangle(),
            testCircle(),
            testEllipse(),
            testLine(),
            testPolygon(),
            testPolyline(),
            testPath(),
            testText(),
            testArc(),
            testTable(values),
            testImage()
        ]
    };
}
function testImage() {
    return Dt.image(100,100,200,120,'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png');
}
function testTable(values) {
    let col = [
        {
            label: '标题1',
            children: [
                {
                    label: '列1',
                    prop: 'col1',
                },
                {
                    label: '列2',
                    prop: 'col2',
                },
                {
                    label: '列3',
                    prop: 'col3',
                }
            ]
        },
        {
            label: '列4',
            prop: 'col4',
        }
    ];
    let data = [
        {col1: '{{P001}}[v]',col2: '{{P002}}[v]',col3: 3, col4: 4,col5: 'KG'},
        {col1: 11,col2: 12,col3: 13, col4: 14,col5: 15},
    ];
    let table = Dt.table(350, 500, 300, 100).setHeaderHeight(40);
    table.setColumn(col)
        .setData(data)
        .setTranslate(0.5, 0.5);
    table.cellStyle = (cell,colIndex,row) => {
        let tagValue = findObjectValue(row[cell.prop], values);
        if(tagValue && typeof tagValue === 'object' && tagValue.w === 1){
            return {
                tableStyle: {
                    fill: 'red',
                },
                fontStyle: {
                    fill: '#fff',
                }
            }
        }
    }
    return table;
}

function testArc() {
    let arc = Dt.arc(250, 500, 50);
    arc.setStyle({fill: 'red'})
        .setAngle(30, 120, 2);
    arc.onMouseover = ({drawParam}) => {
        drawParam.r += 4;
        drawParam.ox += 1;
        drawParam.oy += 1;
    }
    arc.onMouseout = ({drawParam}) => {
        drawParam.r -= 4;
        drawParam.ox -= 1;
        drawParam.oy -= 1;
    }

    return arc;
}

function testText() {
    let fontStyle = {
        //fontFamily: 'Verdana;serif',
        //对齐方式
        textAlign: 'middle',
        dominantBaseline: 'middle',
        //字体
        fontFamily: 'arial',
        //斜体
        fontStyle: 'italic',
        //加粗
        fontWeight: 'bold',
        //下划线 underline，上划线 overline, 删除线 line-through
        textDecoration: 'underline',
        //大小
        fontSize: 24,
        //填充颜色
        fill: 'red',
        //边框颜色
        //stroke: 'red',
        //调整间距
        //letterSpacing: 8,
        //
        textLength: 120,
        //textAnchor: 'left',
        //自适应宽度 spacing
        lengthAdjust: 'spacing',
    };
    let text = Dt.text(0, 0, '测试文字', fontStyle);
    text.setTranslate(100, 450);

    let textList = [];
    textList.push(Dt.text(0, 60, '子项文字2').clearParentStyle(true));
    text.addText(Dt.text(0, 30, '子项文字1'))
        .addTextList(textList);

    return text;
}

function testPath() {
    let d = 'M153 334C153 334 151 334 151 334' +
        'C151 339 153 344 156 344' +
        'C164 344 171 339 171 334' +
        'C171 322 164 314 156 314' +
        'C142 314 131 322 131 334' +
        'C131 350 142 364 156 364' +
        'C175 364 191 350 191 334' +
        'C191 311 175 294 156 294' +
        'C131 294 111 311 111 334' +
        'C111 361 131 384 156 384' +
        'C186 384 211 361 211 334' +
        'C211 300 186 274 156 274'
    let path = Dt.path(d);
    path.setStyle({strokeWidth: 2, stroke: 'red', fill: 'rgba(255,255,255,0.8)'})
        .clearParentStyle(true);
    path.onClick = () => {
        window.alert('点击了曲线！');
    }
    return path;
}

function testPolyline() {
    //let polyline = Dt.polyline('0,0 0,20 20,20 20,40 40,40 40,60 100,60');
    let polyline = Dt.polyline();
    polyline.setPointList([[120, 0], [200, 110]])
        .addPoint([70, 150])
        .addPointList([[23, 134]]);
    polyline.setTranslate(500.5, 250.5)
        .setStyle({strokeWidth: 3, fill: 'red'});
    return polyline
}

function testPolygon() {
    let polygon = Dt.polygon();
    //polygon.points = '220,100 300,210 170,250 123,234';
    polygon.setPointList([[220, 100], [300, 210]])
        .addPoint([170, 250])
        .addPointList([[123, 234]]);
    polygon.setTranslate(150, 150);
    polygon.onClick = ({event, drawParam, ele}) => {
        console.log(event);
        console.log(drawParam);
        console.log(ele);
    }
    polygon.onMouseover = ({drawParam}) => {
        drawParam.style.stroke = defaultStyle.stroke;
        drawParam.style.fill = 'white';
    }
    polygon.onMouseout = ({drawParam}) => {
        drawParam.style.fill = 'red';
        drawParam.style.stroke = 'none';
    }
    return polygon;
}

function testLine() {
    //let line = Dt.line(0,0, 0,100);
    //let line = Dt.line(0,0, 200,0);
    let line = Dt.line(0, 0, 200, 100);
    line.setTranslate(100.5, 300.5)
        //.setScale(2)
        .borderScale(false)
        .setStyle({stroke: 'red'});
    return line;
}

function testEllipse() {
    let ellipse = Dt.ellipse(800, 150, 50, 80);
    ellipse.setTranslate(0.5, 0.5)
        .setText('椭圆形')
        .setFontStyle({fill: '#f00', textAlign: 'center', textBaseline: 'middle', fontSize: 16})
        .setStyle({fill: '#ccc'});
    return ellipse;
}

function testCircle() {
    let circle = Dt.circle(600, 150, 50);
    circle.setTranslate(0.5, 0.5)
        .setText('圆形')
        .setFontStyle({fill: '#000', textAlign: 'center', textBaseline: 'middle', fontSize: 16})
        .setStyle({fill: '#0f0'});
    return circle;
}

function testTriangle() {
    //let triangle = Dt.triangle(0,0,-60,120,60,120);
    let triangle = Dt.triangle()
        .isoscelesTriangle(0, 0, 100, 100)
        .setTranslate(400.5, 100.5)
        .setScale(0)
        .clearParentStyle(true)
        .setStart([0, 60])
        .setEnd([0, 60])
        .setText('三角形', {fill: '#000', textAlign: 'center', textBaseline: 'top', fontSize: 20})
        .setStyle({fill: '#f00'});
    triangle.onClick = ({event, drawParam, ele}) => {
        console.log(event);
        console.log(drawParam);
        console.log(ele);
    }
    triangle.onMouseover = ({drawParam}) => {
        drawParam.style.stroke = defaultStyle.stroke;
        drawParam.style.fill = 'none';
    }
    triangle.onMouseout = ({drawParam}) => {
        drawParam.style.fill = 'red';
        drawParam.style.stroke = 'none';
    }
    return triangle;
}

function testRect() {
    //let rect = Dt.rect(0,10,200,100);
    //let rect = Dt.rect().setStart([30,30]).setEnd([230,130]);
    let rect = Dt.rect().setEnd([230, 130]);
    rect.setText('矩形')
        .setTranslate(100.5, 100.5)
        //.setRotate(45)
        //.setScale(2)
        //.borderScale(true)
        //.clearParentStyle(true)
        .setStyle({stroke: 'blue', strokeWidth: 1});
    rect.onClick = ({event, drawParam, ele}) => {
        console.log(event);
        console.log(drawParam);
        console.log(ele);
    }
    rect.onMouseover = ({drawParam}) => {
        drawParam.style.fill = 'red';
        drawParam.start[0] -= 10;
        drawParam.start[1] -= 10;
        drawParam.end[0] += 10;
        drawParam.end[1] += 10;
    }
    rect.onMouseout = ({drawParam}) => {
        drawParam.style.fill = defaultStyle.fill;
        drawParam.start[0] += 10;
        drawParam.start[1] += 10;
        drawParam.end[0] -= 10;
        drawParam.end[1] -= 10;
    }
    return rect;
}